<template>
    <div class="wrapper">
      <h1 class="title1">{{ examTitle }}</h1>
      <div v-for="(exam, index) in exams" :key="index" class="cards">
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="examtitle">{{exam.examname}}</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click.native = enter_exam(exam.examid)>加入考试</el-button>
            </div>
            <div class="text item">
                {{$store.state.name+'     '+$store.state.phone+"       "+$store.state.email}}
            </div>
        </el-card>
        <br/>
      </div>
    </div>
  </template>
  
<script>
  import axios from "axios";
  export default {
    data() {
      return {
        examTitle: '选择你的考试',
        options: ['A', 'B', 'C', 'D'],
        exams:'a',
      };
    },
    mounted() {
      const that=this;
      axios({
		      method: 'POST',
		      url: 'http://127.0.0.1:8084/searchtest',
          data:{uid:this.$store.state.id}
		  }).then(res=>{
          this.exams=res.data;
          console.log(this.exams);
		  });
      while(this.exams!=='a'){

      }
      if(this.exams.length>=1){
      }
      else{
        that.$message.error("还未报名考试，请先报名考试")
        this.$router.push({ path: "/personal" });
      }
    },
    methods: {
      enter_exam(x){
        this.$store.state.exam=x;
        this.$router.push({ path: "/upload/answer" });
      },
    },
  };
</script>
  
<style>
  .wrapper {
    max-width: 800px;
    padding: 20px;
  }
  
  .title {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 50px;
  }
  .title1 {
    font-size: 36px;
    font-weight: bold;
    padding: 0px 0px 0px 500px;
  }
  .examtitle {
    font-size: 20px;
    font-weight: bold;
    margin-left: 0px;
  }
  .question {
    margin-bottom: 50px;
  }
  
  .question-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  .question-image-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }
  
  .question-image {
    max-width: 100%;
  }
  
  .options {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .option {
    margin-left: 40px;
    display:inline
  }
  
  .option-text {
    margin-left: 10px;
  }
  
  .submit-button {
    display: block;
    margin: auto;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: bold;
    background-color: #27ae60;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
  }
  
  .submit-button:hover {
    background-color: #219653;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 960px;
    height: 120px;
  }

  .cards{
    padding: 0px 0px 0px 200px;
  }
</style>
  